<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="800">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="作业单号">{{ formData.workNo }}</el-descriptions-item>
      <el-descriptions-item label="接车日期">{{ formatDate(formData.receiveTime) }}</el-descriptions-item>
      <el-descriptions-item label="收银日期">{{ formatDate(formData.checkoutTime) }}</el-descriptions-item>
      <el-descriptions-item label="车牌号">{{ formData.carNo }}</el-descriptions-item>
      <el-descriptions-item label="厂牌">{{ formData.carBrand }}</el-descriptions-item>
      <el-descriptions-item label="车形">{{ formData.carModel }}</el-descriptions-item>
      <el-descriptions-item label="维修类别">{{ formData.maintenanceCategory }}</el-descriptions-item>
      <el-descriptions-item label="故障现象">{{ formData.faultPhenomenon }}</el-descriptions-item>
      <el-descriptions-item label="维修项目" :span="2">{{ formData.repairItems }}</el-descriptions-item>
      <el-descriptions-item label="维修费">{{ formData.repairPrice }}</el-descriptions-item>
      <el-descriptions-item label="配件费">{{ formData.accessoryPrice }}</el-descriptions-item>
      <el-descriptions-item label="工料合计">{{ formData.totalPrice }}</el-descriptions-item>
      <el-descriptions-item label="告警内容" :span="2">
        <div v-html="formData.alarmContent"></div>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import { VehiclesMaintenanceApi, VehiclesMaintenanceVO } from '@/api/pplan/vehiclesmaintenance'

/** 车辆维保 详情 */
defineOptions({ name: 'VehiclesMaintenanceDetail' })

const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formData = ref({
  id: undefined,
  workNo: undefined,
  receiveTime: undefined,
  checkoutTime: undefined,
  carNo: undefined,
  carBrand: undefined,
  carModel: undefined,
  maintenanceCategory: undefined,
  faultPhenomenon: undefined,
  repairItems: undefined,
  repairPrice: undefined,
  accessoryPrice: undefined,
  totalPrice: undefined,
  alarmContent: undefined
})

/** 打开弹窗 */
const open = async (row: VehiclesMaintenanceVO) => {
  dialogVisible.value = true
  dialogTitle.value = '车辆维保详情'
  // 设置数据
  formData.value = { ...row }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>